<template>
	<div class="BlueLineBox">
		<div v-for="(item, index) in data" :key="index">
			<div class="timeHeader" v-if="item.dateFormat.showDate">
				<div class="dateBox">
					<div class="month">{{ item.dateFormat.month }}月</div>
					<div class="day">{{ item.dateFormat.day }}</div>
				</div>
			</div>
			<div
				class="datalist"
			>
				<div class="continer" >
					<div class="timeBox">
						<span class="left">{{ item.dateFormat.time }}</span>
            <!-- publishers -->
             <div class="right">
              发布人：<span v-for="n in item.publishers">{{ n.userName }}</span>
             </div>
					</div>
					<div class="title" @click="goDetail(item)">
						<div v-if="item.important=='1'">
							重要
							<div></div>
						</div>
						<span>{{ item.title }}</span>
					</div>
					<div class="tag">
						<Tags :title="item.catalogue" type="type6"/>
					</div>
					<p class="zhdp">综合点评:</p>
					<p class="content">{{ item.text }}</p>
          <!-- 点评图片 -->
          <div class="imgs">
            <el-image v-for="img in item.imgs" style="width: 150px; height: 150px" :src="img" fit="contain" lazy :preview-src-list="item.imgs" />
          </div>
          <!-- 评论收缩按钮 -->
          <div class="control" @click="item.showComment=!item.showComment" v-if="item.reviews.length>0">
            <span>{{ item.showComment?'展开':'收起' }}</span>
            <img :class="{iconactive1:item.showComment,iconactive2:!item.showComment}" src="@/assets/home/a-Frame216.png">
          </div>
          <!-- 评论内容 -->
          <div :class="{anmationbox:true,commentBox1:item.showComment,commentBox2:!item.showComment}">
            <div :class="{commentBox:true}" v-if="item.reviews.length>0">
              <div class="head">
                
                <div class="left">
                  联系人：<span v-for="n in item.reviews[0].contacts">{{ n.userName }}</span>
                </div>
                <span class="right">{{ item.dateFormat.date }} {{ item.dateFormat.time }}</span>
              </div>
              <div class="comment">
                {{ item.reviews[0].review }}
              </div>
            </div>
          </div>
				</div>
				<div class="dot">
					<div></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import router from '@/router'
import dayjs from 'dayjs'
import { ref, watch } from 'vue'
const props = defineProps({
  data: []
})
const emit = defineEmits(['click'])
const data = ref([]) as any
function goDetail(item:any) {
  router.push({name:'sjjdxq',params:{data:item}})
  emit('click',item)
}
watch(()=>props.data,()=>{
  data.value = handleData(props.data)
})
function handleData(data) {
  let list = JSON.parse(JSON.stringify(data))
  // 处理时间
  let dateMap:Array<string> = []
  list.forEach(key=>{
    let date = dayjs(key.publishTime ).format('MM-DD')
    let isShow = false
    if (!dateMap.includes(date)) {
      isShow = true
      dateMap.push(date)
    }
    key.dateFormat = {
      showDate: isShow,
      month: dayjs(key.publishTime ).format('MM'),
      day: dayjs(key.publishTime ).format('DD'),
      date:  date,
      time:  dayjs(key.publishTime ).format('HH:mm:ss')
    }
    // 是否展开评论
    key.showComment = false
    // 处理图片
    if (key.pictures) {
      let list = []
      let pictures = JSON.parse(key.pictures)
      pictures.forEach(key=>{
        if (key.indexOf('http')>=0) {
          list.push(key)
        }
      })
      key.imgs = list
    }
    
  })
  console.log('数据处理',list);
  
  return list
}
</script>

<style scoped lang="less">
.continer {
  padding: 10px 20px !important;
}
.BlueLineBox {
	padding-left: 70px;
	margin-top: 30px;
	> div {
		position: relative;

		border-left: 1px dashed @color-1356FF;
	}
}
.timeHeader {
	position: absolute;
	top: -15px;
  .dateBox {
    width: 56px;
    text-align: center;
    position: absolute;
    left: -70px;
    .month {
      background: linear-gradient(135deg, #2b8fff 0%, #1356ff 100%);
      border-radius: 4px 4px 0px 0px;
      font-size: 16px;
      color: #ffffff;
      line-height: 29px;
    }
    .day {    
      background: #eef3ff;
      font-size: 14px;
      color: #1356ff;
      padding: 3px 0;
    }
  }
}
.header2 {
	// padding: 25px 0;
	font-size: 16px;
	padding-left: 30px;
	font-weight: 600;
	font-size: 16px;
	color: #293366;
}

.datalist {
	padding: 5px 0px 5px 16px;
	// margin-left: 75px;
	// border-left: 1px dashed @color-1356FF;
	position: relative;
	.dot {
		position: absolute;
		width: 16px;
		height: 16px;
		background-color: #ecf0ff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 50px;
		left: -9px;
		> div {
			width: 50%;
			height: 50%;
			background-color: @color-1356FF;
			border-radius: 50%;
		}
	}
	.continer {
		background: #fafafb;
		border-radius: 16px;
		padding: 24px;
		// height: 200px;
		margin-left: 5px;
		font-size: 14px;
	}
}
.timeBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	.left {
		font-size: 16px;
		color: #1356ff;
	}
	.right {
		font-size: 13px;
		color: #8f919c;
    >span {
      &:not(:last-child)::after {
        content: "、";
      }
    }
	}
}
.title {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
  cursor: pointer;
	> span {
		font-weight: 600;
		font-size: 16px;
		color: #0f142c;
	}
	> div {
		display: flex;
		align-items: center;
		padding-left: 8px;
		border-radius: 5px;
		width: 50px;
		height: 20px;
		font-size: 12px;
		color: #ffffff;
		margin-right: 8px;
		background: linear-gradient(#e43933 0%, #f4711d 100%);
		position: relative;
		> div {
			position: absolute;
			width: 15px;
			height: 20px;
			border-bottom-left-radius: 50%;
			background-color: #fff;
			right: -3px;
			top: -1px;
		}
	}
}
.tag {
	display: flex;
	gap: 15px;
	margin-bottom: 10px;
	// > div {
	// 	font-size: 12px;
	// 	width: auto;
	// 	padding: 3px 8px;
	// 	color: #f4711d;
	// 	background-color: #fff2e9;
	// 	border: 1px solid #ffe3cf;
	// 	border-radius: 4px;
	// }
}
.zhdp {
	font-size: 12px;
	color: @color-636976;
	margin-top: 10px;
}
.content {
	font-size: 12px;
	color: @color-636976;
}
.imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 10px;
  >img {
    width: 300px;
  }
}
.control {
  display: flex;
  align-items: center;
  margin: 5px 0;
  cursor: pointer;
  span {
    color: #868D98;
    font-size: 11px;
    margin-right:3px;
  }
  img {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
  }
}
@keyframes rotate1 {
  from { transform: rotate(90deg); }
  to { transform: rotate(-90deg); }
}
@keyframes rotate2 {
  from { transform: rotate(-90deg); }
  to { transform: rotate(90deg); }
}
.iconactive1 {
  animation: rotate1 0.3s forwards;
}
.iconactive2 {
  animation: rotate2 0.3s forwards;
}
@keyframes heightto0 {
  from { 
    max-height:500px;
   }
  to { 
    height:0;
   }
}
@keyframes heighttoauto {
  from { height:0;
   }
  to { 
    max-height:500px;
   }
}
.anmationbox {
  max-height:500px;
  overflow: hidden;

}
.commentBox {
  background: #F2F4F7;
  border-radius: 8px;
  padding: 10px;
  .comment {
    font-size: 12px;
		color: #8f919c;
    overflow: hidden;
  }
  .head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
	.right {
		font-size: 13px;
		color: #8f919c;
	}
	.left {
		font-size: 13px;
		color: black;
    >span {
      &:not(:last-child)::after {
        content: "、";
      }
    }
	}
}
}
.commentBox1 {
  animation: heightto0 0.5s forwards linear;
}
.commentBox2 {
  animation: heighttoauto 0.5s forwards linear;
}
</style>
